<template>
	<div>
		<div class="total" id="myChart" ref="myChart"></div>
	</div>
</template>

<script>
	//引入echarts
	import echarts from "echarts/lib/echarts";

	import "echarts/lib/chart/pie";
	// 引入地图
	import "echarts/lib/chart/scatter";
	// 引入提示框和标题组件
	import "echarts/lib/component/tooltip";
	import "echarts/lib/component/title";
	import "echarts/lib/component/legend";
	import "echarts/extension/bmap/bmap";

	import axios from "axios";
	import {
		mapState,
		mapGetters,
		mapMutations,
		mapActions
	} from "vuex";
	export default {
		data() {
			return {
				type: "班级人数统计",
				classAxisData: [],
				classSeriesData: [],
				ageAxisData: [],
				ageSeriesData: [],
				shopsCountData: [],
				shopsData: [],
				zoom: 0
			};
		},
		mounted() {
			this.$nextTick(() => {
				this.showChart();
			});
		},
		methods: {
			showChart() {
				// 销毁之前的实例
				echarts.dispose(this.$refs.myChart);
				// 重新创建新的实例
				let myChart = echarts.init(this.$refs.myChart);
				console.log(myChart)
				axios({
					url: "/api/map/counts",
					method: "get"
				}).then(res => {
					console.log(res.data)
					this.shopsCountData = res.data;
					myChart.setOption(this.mapOptions, true);
					// console.log(myChart.setOption)
				});
				myChart.on("finished", async () => {
					// 从echarts对象中获取bmap对象
					var bmap = myChart
						.getModel()
						.getComponent("bmap")
						.getBMap();
				// 设置最小缩放值
				bmap.setMinZoom(5);
				// 设置最大缩放值
				bmap.setMaxZoom(15);
				bmap.setMapStyleV2({
					styleId: 'f146422e583f3bc492bd464544fa2e30'
				})
				// 缩放结束后的事件
				bmap.addEventListener("zoomend", e => {
					let zoom = this.zoom;
					this.zoom = bmap.getZoom();
					// 打印出当前缩放值
					if (zoom < bmap.getZoom() && bmap.getZoom() == 10) {
						axios({
							url: "/api/map/",
							method: "get"
						}).then(res => {
							this.shopsData = res.data;
							let options = this.mapOptions;
							options.bmap.zoom = 10;
							myChart.setOption(this.mapOptions, false);
						});
					} else if (
						zoom > bmap.getZoom() &&
						bmap.getZoom() <= 10
					) {
						this.shopsData = [];
						let options = this.mapOptions;
						myChart.setOption(this.mapOptions, false);
					}
				});
				});

			}
		},
		computed: {
		        mapOptions() {
		            return {
		                title: {
		                    text: "全国门店统计",
		                    left: "center",
		                    textStyle: {
		                        color: "#fff"
		                    }
		                },
		                tooltip: {
		                    trigger: "item"
		                },
		                bmap: {
		                    center: [104.072259, 30.663403],
		                    zoom: 5,
		                    roam: true,
		                    mapStyle: {
		                        styleJson: 
								[{
								    "featureType": "estatelabel",
								    "elementType": "labels.text.fill",
								    "stylers": {
								        "color": "#8d694eff"
								    }
								}, {
								    "featureType": "restaurantlabel",
								    "elementType": "labels",
								    "stylers": {
								        "visibility": "off"
								    }
								}, {
								    "featureType": "restaurantlabel",
								    "elementType": "labels.icon",
								    "stylers": {
								        "visibility": "off"
								    }
								}, {
								    "featureType": "lifeservicelabel",
								    "elementType": "labels",
								    "stylers": {
								        "visibility": "off"
								    }
								}, {
								    "featureType": "lifeservicelabel",
								    "elementType": "labels.icon",
								    "stylers": {
								        "visibility": "off"
								    }
								}, {
								    "featureType": "transportationlabel",
								    "elementType": "labels.icon",
								    "stylers": {
								        "visibility": "off"
								    }
								}, {
								    "featureType": "transportationlabel",
								    "elementType": "labels",
								    "stylers": {
								        "visibility": "on"
								    }
								}, {
								    "featureType": "financelabel",
								    "elementType": "labels.icon",
								    "stylers": {
								        "visibility": "off"
								    }
								}, {
								    "featureType": "financelabel",
								    "elementType": "labels",
								    "stylers": {
								        "visibility": "off"
								    }
								}, {
								    "featureType": "land",
								    "elementType": "geometry",
								    "stylers": {
								        "color": "#ffffffff"
								    }
								}, {
								    "featureType": "building",
								    "elementType": "geometry.fill",
								    "stylers": {
								        "color": "#e7dfd6ff"
								    }
								}, {
								    "featureType": "building",
								    "elementType": "geometry.stroke",
								    "stylers": {
								        "color": "#b9a797ff"
								    }
								}, {
								    "featureType": "estatelabel",
								    "elementType": "labels.text.stroke",
								    "stylers": {
								        "color": "#ebe1d8ff"
								    }
								}, {
								    "featureType": "estatelabel",
								    "elementType": "labels.icon",
								    "stylers": {
								        "visibility": "off"
								    }
								}, {
								    "featureType": "estatelabel",
								    "elementType": "labels.text",
								    "stylers": {
								        "fontsize": 28
								    }
								}, {
								    "featureType": "manmade",
								    "elementType": "labels.text.fill",
								    "stylers": {
								        "color": "#72533aff"
								    }
								}, {
								    "featureType": "manmade",
								    "elementType": "geometry",
								    "stylers": {
								        "color": "#ecececff"
								    }
								}, {
								    "featureType": "manmade",
								    "elementType": "labels.text",
								    "stylers": {
								        "fontsize": 36
								    }
								}, {
								    "featureType": "manmade",
								    "elementType": "labels.text.stroke",
								    "stylers": {
								        "color": "#b6997fff"
								    }
								}, {
								    "featureType": "green",
								    "elementType": "geometry",
								    "stylers": {
								        "color": "#ecececff"
								    }
								}, {
								    "featureType": "education",
								    "elementType": "geometry",
								    "stylers": {
								        "color": "#ecececff"
								    }
								}, {
								    "featureType": "medical",
								    "elementType": "geometry",
								    "stylers": {
								        "color": "#ecececff"
								    }
								}, {
								    "featureType": "scenicspots",
								    "elementType": "geometry",
								    "stylers": {
								        "color": "#ecececff"
								    }
								}, {
								    "featureType": "entertainment",
								    "elementType": "geometry",
								    "stylers": {
								        "visibility": "off"
								    }
								}, {
								    "featureType": "estate",
								    "elementType": "geometry",
								    "stylers": {
								        "color": "#ecececff"
								    }
								}, {
								    "featureType": "shopping",
								    "elementType": "geometry",
								    "stylers": {
								        "color": "#ecececff",
								        "visibility": "on"
								    }
								}, {
								    "featureType": "transportation",
								    "elementType": "geometry",
								    "stylers": {
								        "color": "#ecececff"
								    }
								}, {
								    "featureType": "transportation",
								    "elementType": "labels.text.fill",
								    "stylers": {
								        "color": "#72533aff"
								    }
								}, {
								    "featureType": "transportation",
								    "elementType": "labels.text.stroke",
								    "stylers": {
								        "color": "#b6997fff"
								    }
								}, {
								    "featureType": "transportation",
								    "elementType": "labels.text",
								    "stylers": {
								        "fontsize": 36
								    }
								}, {
								    "featureType": "medical",
								    "elementType": "labels.text.fill",
								    "stylers": {
								        "color": "#72533aff"
								    }
								}, {
								    "featureType": "medical",
								    "elementType": "labels.text.stroke",
								    "stylers": {
								        "color": "#b6997fff"
								    }
								}, {
								    "featureType": "medical",
								    "elementType": "labels.text",
								    "stylers": {
								        "fontsize": 36
								    }
								}, {
								    "featureType": "education",
								    "elementType": "labels.text.fill",
								    "stylers": {
								        "color": "#72533aff"
								    }
								}, {
								    "featureType": "education",
								    "elementType": "labels.text.stroke",
								    "stylers": {
								        "color": "#b6997fff"
								    }
								}, {
								    "featureType": "education",
								    "elementType": "labels.text",
								    "stylers": {
								        "fontsize": 36
								    }
								}, {
								    "featureType": "carservicelabel",
								    "elementType": "labels",
								    "stylers": {
								        "visibility": "off"
								    }
								}, {
								    "featureType": "carservicelabel",
								    "elementType": "labels.icon",
								    "stylers": {
								        "visibility": "off"
								    }
								}, {
								    "featureType": "shoppinglabel",
								    "elementType": "labels.icon",
								    "stylers": {
								        "visibility": "off"
								    }
								}, {
								    "featureType": "hotellabel",
								    "elementType": "labels.icon",
								    "stylers": {
								        "visibility": "off"
								    }
								}, {
								    "featureType": "governmentlabel",
								    "elementType": "labels.icon",
								    "stylers": {
								        "visibility": "off"
								    }
								}, {
								    "featureType": "companylabel",
								    "elementType": "labels.icon",
								    "stylers": {
								        "visibility": "off"
								    }
								}, {
								    "featureType": "businesstowerlabel",
								    "elementType": "labels.icon",
								    "stylers": {
								        "visibility": "off"
								    }
								}, {
								    "featureType": "entertainmentlabel",
								    "elementType": "labels",
								    "stylers": {
								        "visibility": "off"
								    }
								}, {
								    "featureType": "entertainmentlabel",
								    "elementType": "labels.icon",
								    "stylers": {
								        "visibility": "off"
								    }
								}, {
								    "featureType": "medicallabel",
								    "elementType": "labels.icon",
								    "stylers": {
								        "visibility": "off"
								    }
								}, {
								    "featureType": "educationlabel",
								    "elementType": "labels.icon",
								    "stylers": {
								        "visibility": "off"
								    }
								}, {
								    "featureType": "scenicspotslabel",
								    "elementType": "labels.icon",
								    "stylers": {
								        "visibility": "off"
								    }
								}, {
								    "featureType": "airportlabel",
								    "elementType": "labels.icon",
								    "stylers": {
								        "visibility": "off"
								    }
								}, {
								    "featureType": "airportlabel",
								    "elementType": "labels.text",
								    "stylers": {
								        "fontsize": 36
								    }
								}, {
								    "featureType": "airportlabel",
								    "elementType": "labels.text.fill",
								    "stylers": {
								        "color": "#72533aff"
								    }
								}, {
								    "featureType": "airportlabel",
								    "elementType": "labels.text.stroke",
								    "stylers": {
								        "color": "#b6997fff"
								    }
								}, {
								    "featureType": "scenicspotslabel",
								    "elementType": "labels.text",
								    "stylers": {
								        "fontsize": 28
								    }
								}, {
								    "featureType": "scenicspotslabel",
								    "elementType": "labels.text.fill",
								    "stylers": {
								        "color": "#4a4a4aff"
								    }
								}, {
								    "featureType": "scenicspotslabel",
								    "elementType": "labels.text.stroke",
								    "stylers": {
								        "color": "#ffffffff"
								    }
								}, {
								    "featureType": "educationlabel",
								    "elementType": "labels.text.fill",
								    "stylers": {
								        "color": "#8d694eff"
								    }
								}, {
								    "featureType": "educationlabel",
								    "elementType": "labels.text.stroke",
								    "stylers": {
								        "color": "#ebe1d8ff"
								    }
								}, {
								    "featureType": "educationlabel",
								    "elementType": "labels.text",
								    "stylers": {
								        "fontsize": 26
								    }
								}, {
								    "featureType": "medicallabel",
								    "elementType": "labels.text.fill",
								    "stylers": {
								        "color": "#8d694eff"
								    }
								}, {
								    "featureType": "medicallabel",
								    "elementType": "labels.text.stroke",
								    "stylers": {
								        "color": "#ebe1d8ff"
								    }
								}, {
								    "featureType": "medicallabel",
								    "elementType": "labels.text",
								    "stylers": {
								        "fontsize": 24
								    }
								}, {
								    "featureType": "businesstowerlabel",
								    "elementType": "labels.text.stroke",
								    "stylers": {
								        "color": "#ebe1d8ff"
								    }
								}, {
								    "featureType": "businesstowerlabel",
								    "elementType": "labels.text.fill",
								    "stylers": {
								        "color": "#8d694eff"
								    }
								}, {
								    "featureType": "businesstowerlabel",
								    "elementType": "labels.text",
								    "stylers": {
								        "fontsize": 24
								    }
								}, {
								    "featureType": "companylabel",
								    "elementType": "labels",
								    "stylers": {
								        "visibility": "off"
								    }
								}, {
								    "featureType": "hotellabel",
								    "elementType": "labels.text.fill",
								    "stylers": {
								        "color": "#8d694eff"
								    }
								}, {
								    "featureType": "hotellabel",
								    "elementType": "labels.text.stroke",
								    "stylers": {
								        "color": "#ebe1d8ff"
								    }
								}, {
								    "featureType": "hotellabel",
								    "elementType": "labels.text",
								    "stylers": {
								        "fontsize": 24
								    }
								}, {
								    "featureType": "shoppinglabel",
								    "elementType": "labels.text.fill",
								    "stylers": {
								        "color": "#8d694eff"
								    }
								}, {
								    "featureType": "shoppinglabel",
								    "elementType": "labels.text.stroke",
								    "stylers": {
								        "color": "#ebe1d8ff"
								    }
								}, {
								    "featureType": "transportationlabel",
								    "elementType": "labels.text.fill",
								    "stylers": {
								        "color": "#4a4a4aff"
								    }
								}, {
								    "featureType": "transportationlabel",
								    "elementType": "labels.text",
								    "stylers": {
								        "fontsize": 24
								    }
								}, {
								    "featureType": "scenicspots",
								    "elementType": "labels.text.fill",
								    "stylers": {
								        "color": "#72533aff"
								    }
								}, {
								    "featureType": "scenicspots",
								    "elementType": "labels.text.stroke",
								    "stylers": {
								        "color": "#b6997fff"
								    }
								}, {
								    "featureType": "scenicspots",
								    "elementType": "labels.text",
								    "stylers": {
								        "fontsize": 36
								    }
								}, {
								    "featureType": "governmentlabel",
								    "elementType": "labels.text.fill",
								    "stylers": {
								        "color": "#4a4a4aff"
								    }
								}, {
								    "featureType": "scenicspotslabel",
								    "elementType": "labels",
								    "stylers": {
								        "visibility": "off"
								    }
								}, {
								    "featureType": "district",
								    "elementType": "labels.text.fill",
								    "stylers": {
								        "color": "#ffffffff"
								    }
								}, {
								    "featureType": "district",
								    "elementType": "labels.text.stroke",
								    "stylers": {
								        "color": "#72533aff",
								        "weight": 3.5
								    }
								}, {
								    "featureType": "town",
								    "elementType": "labels.text.stroke",
								    "stylers": {
								        "color": "#72533aff",
								        "weight": 3
								    }
								}, {
								    "featureType": "town",
								    "elementType": "labels.text.fill",
								    "stylers": {
								        "color": "#ffffffff"
								    }
								}, {
								    "featureType": "village",
								    "elementType": "labels.text.stroke",
								    "stylers": {
								        "color": "#ffffffff",
								        "weight": 2.5
								    }
								}, {
								    "featureType": "village",
								    "elementType": "labels.text.fill",
								    "stylers": {
								        "color": "#72533aff",
								        "weight": 40
								    }
								}, {
								    "featureType": "village",
								    "elementType": "labels.text",
								    "stylers": {
								        "fontsize": 20
								    }
								}, {
								    "featureType": "highway",
								    "elementType": "geometry.fill",
								    "stylers": {
								        "color": "#fdf0daff"
								    }
								}, {
								    "featureType": "highway",
								    "elementType": "geometry.stroke",
								    "stylers": {
								        "color": "#ffd993ff"
								    }
								}, {
								    "featureType": "highway",
								    "elementType": "labels.text.fill",
								    "stylers": {
								        "color": "#000000ff"
								    }
								}, {
								    "featureType": "highway",
								    "elementType": "labels.text.stroke",
								    "stylers": {
								        "color": "#ffffffff"
								    }
								}, {
								    "featureType": "nationalway",
								    "elementType": "geometry.fill",
								    "stylers": {
								        "color": "#fdf0daff"
								    }
								}, {
								    "featureType": "nationalway",
								    "elementType": "geometry.stroke",
								    "stylers": {
								        "color": "#ffd993ff"
								    }
								}, {
								    "featureType": "nationalway",
								    "elementType": "labels.text.fill",
								    "stylers": {
								        "color": "#000000ff"
								    }
								}, {
								    "featureType": "nationalway",
								    "elementType": "labels.text.stroke",
								    "stylers": {
								        "color": "#ffffffff"
								    }
								}, {
								    "featureType": "provincialway",
								    "elementType": "geometry.stroke",
								    "stylers": {
								        "color": "#ffd993ff"
								    }
								}, {
								    "featureType": "provincialway",
								    "elementType": "geometry.fill",
								    "stylers": {
								        "color": "#fdf0daff"
								    }
								}, {
								    "featureType": "provincialway",
								    "elementType": "labels.text.fill",
								    "stylers": {
								        "color": "#000000ff"
								    }
								}, {
								    "featureType": "provincialway",
								    "elementType": "labels.text.stroke",
								    "stylers": {
								        "color": "#ffffffff"
								    }
								}, {
								    "featureType": "subway",
								    "elementType": "geometry.fill",
								    "stylers": {
								        "color": "#f5a117ff"
								    }
								}, {
								    "featureType": "manmade",
								    "elementType": "labels",
								    "stylers": {
								        "visibility": "on"
								    }
								}, {
								    "featureType": "village",
								    "elementType": "labels",
								    "stylers": {
								        "visibility": "off"
								    }
								}, {
								    "featureType": "town",
								    "elementType": "labels",
								    "stylers": {
								        "visibility": "off"
								    }
								}, {
								    "featureType": "district",
								    "elementType": "labels",
								    "stylers": {
								        "visibility": "off"
								    }
								}, {
								    "featureType": "roadarrow",
								    "elementType": "labels.icon",
								    "stylers": {
								        "visibility": "off"
								    }
								}, {
								    "featureType": "subwaylabel",
								    "elementType": "labels",
								    "stylers": {
								        "visibility": "off"
								    }
								}, {
								    "featureType": "subwaylabel",
								    "elementType": "labels.icon",
								    "stylers": {
								        "visibility": "on"
								    }
								}, {
								    "featureType": "tertiarywaysign",
								    "elementType": "labels",
								    "stylers": {
								        "visibility": "off"
								    }
								}, {
								    "featureType": "tertiarywaysign",
								    "elementType": "labels.icon",
								    "stylers": {
								        "visibility": "off"
								    }
								}, {
								    "featureType": "provincialwaysign",
								    "elementType": "labels",
								    "stylers": {
								        "visibility": "off"
								    }
								}, {
								    "featureType": "provincialwaysign",
								    "elementType": "labels.icon",
								    "stylers": {
								        "visibility": "off"
								    }
								}, {
								    "featureType": "nationalwaysign",
								    "elementType": "labels",
								    "stylers": {
								        "visibility": "off"
								    }
								}, {
								    "featureType": "nationalwaysign",
								    "elementType": "labels.icon",
								    "stylers": {
								        "visibility": "off"
								    }
								}, {
								    "featureType": "highwaysign",
								    "elementType": "labels",
								    "stylers": {
								        "visibility": "off"
								    }
								}, {
								    "featureType": "highwaysign",
								    "elementType": "labels.icon",
								    "stylers": {
								        "visibility": "off"
								    }
								}, {
								    "featureType": "city",
								    "elementType": "labels.icon",
								    "stylers": {
								        "visibility": "off"
								    }
								}]
		                    }
		                },
		                series: [
		                    {
		                        name: "门店数",
		                        type: "scatter",
		                        coordinateSystem: "bmap",
		                        data: this.shopsCountData,
		                        symbolSize: function(val) {
		                            return val[2] * 2;
		                        },
		                        // label: {
		                        //     show: true,
		                        //     formatter: function(params) {
		                        //         return params.data[3];
		                        //     }
		                        // },
		                        itemStyle: {
		                            normal: {
		                                color: "#ddb926"
		                            }
		                        },
		                        tooltip: {
		                            formatter: function(params, ticket, callback) {
		                                return (
		                                    "城市：" +
		                                    params.data[3] +
		                                    "<br>门店数：" +
		                                    params.data[2]
		                                );
		                            }
		                        }
		                    },
		                    {
		                        name: "门店位置",
		                        type: "scatter",
		                        coordinateSystem: "bmap",
		                        data: this.shopsData,
		                        symbol: "pin",
		                        symbolSize: 20,
		                        itemStyle: {
		                            normal: {
		                                color: "red"
		                            }
		                        },
		                        tooltip: {
		                            formatter: function(params, ticket, callback) {
		                                return (
		                                    "店铺名称：" +
		                                    params.data[2] +
		                                    "<br>地址：" +
		                                    params.data[3]
		                                );
		                            }
		                        }
		                    }
		                ]
		            };
		        }
		}
	}
</script>

<style>
	.total {
		width: 100%;
		height: 600px;
	}
</style>
